<template>
  <view>
<!--    <u-tabs :current="1" :list="list1" @click="changeTab" ></u-tabs>-->
    <u-sticky bgColor="#fff">
      <haverster-sliding-menu :active-index="activeIndex" @change="changeTab" :list="list1" ></haverster-sliding-menu>
    </u-sticky>

    <view class="wrap" >
          <view class="page-box">
            <view class="order" v-for="(item,index) in orderList" :key="index">
              <view @click="goDetails(item)">
              <view class="top">
                <view class="left">
                  <u-icon name="home" :size="20" color="rgb(94,94,94)"></u-icon>
                  <view class="store">{{item.shopName}}</view>
                  <u-icon name="arrow-right" color="rgb(203,203,203)" :size="15"></u-icon>
                </view>
                <view class="right">{{item.orderStatus}}</view>
              </view>
              <view class="item" >
                <view class="left">
                  <u-image :src="baseImagUrl+item.imageUrl" width="90px" height="100px"></u-image>
                </view>
                <view class="content">
                  <view class="title u-line-2">{{item.commodityName}}</view>
                  <view style="background-color: #ececec;color: #6a6a6a;width: fit-content;padding: 8rpx;font-size: 26rpx">{{item.specification}}</view>
<!--                  <view class="delivery-time">下单时间：{{item.createDatetime}}</view>-->
                </view>
                <view class="right">
                  <view class="price">
                    ￥{{item.price}}
                  </view>
                  <view class="number">x{{item.count}}</view>
                </view>
              </view>
              <view class="total">
                共{{item.count}}件商品 合计:
                <text class="total-price">
                  ￥{{item.price}}
                </text>
              </view>
              </view>
              <view class="uni-flex uni-row">
                <view style="height: 80rpx;width: 100%;padding: 10rpx;display: inline-flex;">
                  <view style="width: 30%;height: 100%" >
                    <u-button type="warning" :plain="true" shape="circle" size="mini" text="镂空"  v-if="item.orderStatus=='待支付'">取消订单</u-button>
                  </view>
                  <view style="width: 70%;height: 100%">
                    <view class="btView">
                      <u-button :plain="true" shape="circle" v-if="item.orderStatus=='待付款'||item.orderStatus=='待发货'||item.orderStatus=='已发货'" size="mini" @click="toChangeAddress(item)">修改地址</u-button>
                      <u-button :plain="true" shape="circle" v-if="item.orderStatus=='待付款'" size="mini" text="镂空" @click="goPay(item)">付款</u-button>
                      <u-button :plain="true" shape="circle" v-if="item.orderStatus=='待发货'||item.orderStatus=='待收货'||item.orderStatus=='已签收'" size="mini" text="镂空" @click="confirmReceipt(item)">确定收货</u-button>
                      <u-button :plain="true" shape="circle" v-if="item.orderStatus=='订单完成'" size="mini" text="镂空" @click="toEvaluate(item)">去评价</u-button>
                    </view>

                  </view>
                </view>
              </view>
            </view>
          </view>
      <uni-load-more :status="status" />
    </view>
<!--    <mi-loading-->
<!--        ref="Loading"-->
<!--        title="加载中"-->
<!--        hasMask="true"-->
<!--    ></mi-loading>-->
  </view>
</template>

<script>
import haversterSlidingMenu from "../../../../components/haverster-slidingMenu/haversterSlidingMenu";
import {mainService} from "../../../../api/buyer/main";
import {BASE_IMG_URL} from "../../../../api/service";
import {attachmentService} from "../../../../api/buyer/public/attachmentService";

export default {
  components: {haversterSlidingMenu},
  data() {
    return {
      list1: ['全部', '待付款','待发货','待收货','待评价'],
      orderList:[
      ],
      baseImagUrl:BASE_IMG_URL,
      user:{},
      dataList: [],
      queryParams:{
        currentPage:1,
        pageSize:20,
        filters:{

        },
        orderBys:[
          {
            property:"createDatetime",
            order:"DESC"
          }
        ]
      },
      backType:"",
      status:"more",
      activeIndex:"0",
      infoMap:new Map(),
    };
  },
  async onReachBottom() {
    // console.log("onReachBottom");
    if(this.status!="no-more"){
      this.queryParams.currentPage+=1;
      this.status="loading";
      this.init("loadMore")
    }
  },
  onLoad(option) {
    const info = JSON.parse(decodeURIComponent(option.info));
    this.user=uni.getStorageSync('userInfo');
    let status=info.status
    this.backType=info.type;
    this.queryParams.filters.orderStatus=status
    this.queryParams.filters.userId=this.user.eid
    if(status==="待付款"){
      this.activeIndex="1"
    }
    if(status==="待发货"){
      this.activeIndex="2"
    }
    if(status==="待收货"){
      this.activeIndex="3"
      this.queryParams.filters.orderStatus="已签收$|$待收货"
    }
    if(status==="待评价"){
      this.activeIndex="4"
      this.queryParams.filters.orderStatus="订单完成"
    }
    console.log(this.activeIndex)
    this.init("load")
  },
  // onBackPress(e) {
  //   console.log(e)
  //   return false
  // },
  onUnload(){
    if(this.backType&&this.backType=="pay"){
      uni.navigateBack({
        delta:2
      })
    }
  },
  created(){
    let info=new Map();
    info.set("待付款","待付款")
    info.set("待发货","待发货")
    info.set("待收货","已签收$|$待收货")
    info.set("待评价","订单完成")
    info.set("全部",undefined)
    this.infoMap=info;
  },
  onShow(){
    this.init("load")
  },
  methods:{
    init(type){
      // this.$refs.Loading.show() // 打开
	  if(type=='load') {
	    this.orderList=[];
	    this.queryParams.currentPage=1
	  }
      uni.showLoading({title: '加载中',mask:true});
      mainService.findOrders(this.queryParams).then((res)=>{
        uni.hideLoading();
        this.orderList=this.orderList.concat(res.data.datas)
        console.log(this.orderList)
        if(!res.data.datas||res.data.datas.length<this.queryParams.pageSize){
          this.status="no-more"
        }else {
          this.status="more"
        }
      }).catch((e)=>{
        // this.$refs.Loading.hide()
        uni.hideLoading();
      })
    },
    changeTab(i){
      this.activeIndex=i+""
      console.log(i)
      this.queryParams.filters.orderStatus=this.infoMap.get(this.list1[i])
      this.init("load")
    },
    toEvaluate(item){
      uni.navigateTo({
        url: '/pages/buyer/public/Order/EvaluateEdit?order='+encodeURIComponent(JSON.stringify(item)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    goPay(item){
      let orderInfo={
        price: item.price,
        orderId:item.eid
      }
      uni.navigateTo({
        url: '/pages/buyer/public/PayPage?orderInfo='+encodeURIComponent(JSON.stringify(orderInfo)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    toChangeAddress(order){
      console.log(order)
      let info={
        eid:order.eid,
        userAddress:{
          eid:order.userAddressId,
          recipient:order.recipient,
          phone:order.phone,
          detailedAddress:order.detailedAddress,
        },
        commodity:{
          eid:order.commodityId,
          imageUrl:BASE_IMG_URL+order.imageUrl,
          description:order.commodityName,
          specification:order.specification,
        }
      }
      uni.navigateTo({
        url: '/pages/buyer/public/ChangeAddress?order='+encodeURIComponent(JSON.stringify(info)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    //确认收获
    confirmReceipt(item){
      let that=this
      uni.showModal({
        content: '你确定收货吗？',
        showCancel:true,
        success: function (res) {
          if (res.confirm) {
            uni.showLoading({title: '加载中',mask:true});
            mainService.confirmReceipt(item.eid).then((res)=>{
              uni.hideLoading();
              uni.showToast({
                title: '收货成功',
                duration: 2000
              });
              that.init("load")
            }).catch(err => {
              console.log(err)
              uni.showToast({
                title: '收货失败',
                duration: 2000
              });
              uni.hideLoading()
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
    goDetails(item){
      let obj={
        orderId:item.eid,
        commodityUrl:BASE_IMG_URL+item.imageUrl,
      }
      uni.navigateTo({
        url: '/pages/buyer/public/Order/OrderDetail?info='+encodeURIComponent(JSON.stringify(obj)),
      })
    }
  }
}
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .right {
      color:  #f29100;
    }
  }

  .item {
    display: flex;
    margin: 20rpx 0 0;

    .left {
      margin-right: 20rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }
    }

    .content {
      width: 60%;

      .title {
        font-size: 28rpx;
        //line-height: 50rpx;
      }

      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }

      .delivery-time {
        color: #e5d001;
        font-size: 24rpx;
      }
    }

    .right {
      margin-left: 10rpx;
      padding-top: 20rpx;
      text-align: right;

      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }

      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }

  .total {
    margin-top: 20rpx;
    text-align: right;
    font-size: 24rpx;

    .total-price {
      font-size: 32rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: space-between;
    align-items: center;

    .btn {
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid $u-border-color;
      font-size: 26rpx;
      text-align: center;
      color:#f29100;
    }

    .evaluate {
      color: #f29100;
      border-color:  #f29100;
    }
  }
}

.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;

  image {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .tips {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  height: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}
.btView{
  justify-content: center;
  align-items: center;
  float: right;
  display: flex;
  flex-direction: row;
}

</style>
